@import '@/lib/reset.scss';

.album-banner-box {
    width: 1220px;
    // background: #ff0;
    margin: 0 auto;
    .album-banner-ul {
        // @include rect(100%, 310px);
        li {
            @include rect(244px, 349px);
            // background: #0ff;
            @include padding(0 0 44px 0);
            float: left;
            // margin: 0 8px;
            .album-banner_li {
                @include rect(224px, 224px);
                position: relative;
                overflow: hidden;
                .album-banner_img {
                    @include rect(224px, 224px);
                    background: #e2e2e2;
                    display: block;
                    transition: all 0.6s;
                }
                //遮罩
                .cover_box {
                    position: absolute;
                    @include margin(0 0);
                    @include rect(224px, 224px);
                    background: rgba(0, 0, 0, 0.3);
                    line-height: 224px;
                    text-align: center;
                    z-index: 10;
                    display: none;
                    cursor: pointer;
                    .icon-videofill {
                        color: #fff;
                        font-size: 55px;
                    }
                }
                &:hover .cover_box {
                    display:block
                }
                &:hover .album-banner_img {
                    transform: scale(1.1);
                }
            }
            h2 {
                @include margin(15px 0 0);
                @include rect(224px, 22px);
                line-height: 22px;
                float: left;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                &:hover {
                    @include text-color(#31c27c);
                }
            }
            p {
                @include rect(224px, 23px);
                @include margin(0 0);
                line-height: 23px;
                float: left;
                cursor: pointer;
                @include text-color(#999);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                &:hover {
                    @include text-color(#31c27c);
                }
            }
            span {
                @include rect(224px, 22px);
                line-height: 22px;
                @include text-color(#999);
                float: left;
            }
        }
    }
    .pagination {
        @include rect(100%, 50px);
        // background: #f00;
        @include margin(0 0 60px);
        float: left;
        display: flex;
        justify-content: center;
        .ant-pagination-item-link, .ant-pagination-item, .ant-pagination-item-ellipsis {
            height: 50px;
            line-height: 50px;
            @include padding(0 21px);
            @include margin(0 5px);
            border:0;
            font-size: 15px;
        }
        .ant-pagination-item {
            &:hover {
                background: #31c27c;
            }
        }
        .ant-pagination-item:hover a {
            color: #fff !important;
        }
        .ant-pagination-item-container {
            float: left;
        }
        .ant-pagination-item-active {
            background: #31c27c;
            color: #fff !important;
        }
        .ant-pagination-item-active a{
            color: #fff !important;
        }
    }
}